<template>
  <div class="table-file">
    <a-form :model="searchForm" label-align="left">
      <a-row>
        <a-col flex="312px">
          <a-form-item field="name" label="名称" label-col-flex="60px">
            <a-input v-model="searchForm.name" placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <a-divider :margin="24" style="margin-top: 4px" />
    <a-row :gutter="16" style="margin-bottom: 16px">
      <a-col :flex="1">
        <table-title title="文件列表"></table-title>
      </a-col>
      <a-col :flex="'280px'" style="text-align: right">
        <a-space :size="8">
          <a-button type="outline" @click="startShare">共享</a-button>
          <a-button type="primary" @click="startDeliver">发起交付</a-button>
        </a-space>
      </a-col>
    </a-row>
    <a-table
      row-key="id"
      :loading="loading"
      :pagination="pagination"
      :columns="columns"
      :data="data"
      :bordered="false"
      table-layout-fixed
      @page-change="onPageChange"
    >
      <template #index="{ rowIndex }">
        {{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
      </template>
      <template #version="{ record }">
        <a-tag class="tag" bordered color="cyan">{{ record.version }}</a-tag>
      </template>
    </a-table>
    <AddDialog v-model:visible="dialogVisible" :title="dialogTitle" />
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import TableTitle from '@/components/table-title/index.vue';
  import useLoading from '@/hooks/loading';
  import { Pagination } from '@/types/global';
  import { fileColumns, Column } from './table-column';
  import AddDialog from './add-dialog.vue';

  const columns = ref<Column[]>(fileColumns);
  const { loading, setLoading } = useLoading(true);
  const data = [
    {
      id: '1',
      name: 'Jane Doe',
      fileSize: 23000,
      desc: '32 Park Road, London',
      version: '1.12',
    },
    {
      id: '2',
      name: 'Jane Doe',
      fileSize: 23000,
      desc: '32 Park Road, London',
      version: '1.13',
    },
    {
      id: '3',
      name: 'Jane Doe',
      fileSize: 23000,
      desc: '32 Park Road, London',
      version: '1.1',
    },
    {
      id: '4',
      name: 'Jane Doe',
      fileSize: 23000,
      desc: '32 Park Road, London',
      version: '1.1',
    },
  ];

  const basePagination: Pagination = {
    current: 1,
    pageSize: 20,
  };
  const pagination = reactive({
    ...basePagination,
  });
  const fetchData = async (
    params: Pagination = { current: 1, pageSize: 20 }
  ) => {
    setLoading(true);
    try {
      console.log('fetchData', params);
    } catch (err) {
      // you can report use errorHandler or other
    } finally {
      setLoading(false);
    }
  };
  const onPageChange = (current: number) => {
    fetchData({ ...basePagination, current });
  };
  fetchData();

  const searchForm = ref({
    name: '',
  });

  const dialogVisible = ref(false);
  const dialogTitle = ref('共享');
  const startShare = () => {
    console.log('startShare');
    dialogTitle.value = '共享';
    dialogVisible.value = true;
  };

  const startDeliver = () => {
    console.log('startDeliver');
    dialogTitle.value = '交付';
    dialogVisible.value = true;
  };
</script>

<style lang="less" scoped>
  .table-file {
    margin-top: 24px;
    padding: 0 44px;
  }

  .optional-title-icon {
    width: 46px;
    text-align: center;
  }
  .dropdown {
    position: absolute;
    :deep(.arco-dropdown-list-wrapper) {
      max-height: none;
    }
  }
  :deep(.arco-tag-size-medium) {
    line-height: 24px;
  }
  .tag {
    cursor: pointer;
  }
</style>
